'use strict';
//我的优惠券
import React,{Component} from 'react';
import Header from '../../common/header';
import * as URLconstant from '../../constant/URLconstant'
import Util from '../../common/util';
import Toast from '../../common/ToastUtil';
import {
    View,
    Text,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView
} from 'react-native';
export default class myCoupon extends Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            allList:[],
            noUseList:[],
            usedList:[],
            timeoutList:[],
            listTitle:[{'name':'全部',status:0},{'name':'待使用',status:1},{'name':'已使用',status:2},{'name':'已过期',status:3}],
            status:0,
            loaded:true
        };
      }

    componentDidMount() {
        this.getMyCoupon()
    }

      getMyCoupon(){
          let params = this.props.route.params
          let url = URLconstant.MY_COUPON
          let datakey=[]
          datakey['user_id']=params.user_id
          Util.get(url,datakey,this.getCouponSuc.bind(this),this.errorCallback.bind(this))
      }
    getCouponSuc(datas){
        if(datas.status==0){
            let list = datas.data
            let noUseList = []
            let usedList = []
            let timeoutList = []
            let timestamp = parseInt((new Date()).getTime() / 1000)
            for(let item of list){
                if(item.order_id==0&&item.used_time==0&&item.end_time>=timestamp){
                    item.status=1
                    noUseList.push(item)
                }else if((item.order_id!=0||item.used_time!=0)&&item.end_time>=timestamp){
                    item.status=2
                    usedList.push(item)
                }else if(item.end_time<timestamp){
                    item.status=3
                    timeoutList.push(item)
                }
            }
            this.setState({
                allList:list,
                noUseList:noUseList,
                usedList:usedList,
                timeoutList:timeoutList,
                loaded:false
            })
        }
    }
    errorCallback(err){

    }
    selectStatus(status){
        this.setState({
            status:status
        })
    }

    showCouponList(){
          let status = this.state.status
        let list
        if(status==0){
              list=this.state.allList
        }else if(status==1){
              list=this.state.noUseList
        }else if(status==2){
              list=this.state.usedList
        }else {
              list=this.state.timeoutList
        }
        if(list.length==0){
              return(
                  <View style={{alignItems:'center',justifyContent:'center',paddingTop:150}}>
                      <Text style={{fontSize:14,color:"#333"}}>没有优惠券</Text>
                  </View>
              )
        }else{
              return(
                  <View style={{padding:10}}>
                      {
                          list.map((item,index)=>{
                              return(
                                  <View style={styles.coupon_item} key={index}>
                                      {this.returnCouponBg(item.status)}
                                      {this.pressBtn(item.status)}
                                      <View style={styles.item_header}>
                                        <View style={styles.price_view}>
                                            <Text style={{fontSize:14,color:"#fff",marginTop:10,marginRight:3,backgroundColor:"transparent"}}>¥</Text>
                                            <Text style={{fontSize:28,color:"#fff",backgroundColor:"transparent"}}>{item.coupon_value}</Text>
                                        </View>
                                          <Text style={{fontSize:12,color:"#fff",backgroundColor:"transparent"}}>满{item.min_goods_order}可用</Text>
                                      </View>
                                      <View style={styles.item_bottom}>
                                          <Text style={{fontSize:12,color:"#fff",backgroundColor:"transparent"}}>使用期限:{this.returnTime(item.end_time)}</Text>
                                      </View>
                                  </View>
                              )
                          })
                      }
                  </View>
              )
        }
    }

    returnTime(end_time){
        let date = new Date(end_time*1000)
        let year = date.getFullYear() + '-';
        let month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        let day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
        let hours = (date.getHours()<10?'0'+date.getHours():date.getHours())+":"
        let minutes = (date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes())+":"
        let seconds = date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds()
        let timeTxt = year+month+day+hours+minutes+seconds
        return timeTxt
    }

    returnCouponBg(status){
          if(status==1){
              return(
                  <Image
                      source={require('../../imgs/coupon_bg.png')}
                      style={{width:Util.size.width-20,height:(Util.size.width-20)*0.31}}
                      resizeMode={'cover'}
                  />
              )
          }else if(status==2){
              return(
                  <Image
                      source={require('../../imgs/cp_used.png')}
                      style={{width:Util.size.width-20,height:(Util.size.width-20)*0.31}}
                      resizeMode={'cover'}
                  />
              )
          }else{
              return(
                  <Image
                      source={require('../../imgs/cp_timer.png')}
                      style={{width:Util.size.width-20,height:(Util.size.width-20)*0.31}}
                      resizeMode={'cover'}
                  />
              )
          }
    }

    pressBtn(status){
          if(status==1){
              return(
                  <TouchableOpacity
                      onPress={()=>Toast.show('提交订单时可以使用该优惠券')}
                      style={{width:(Util.size.width-20)*0.31,height:(Util.size.width-20)*0.31,position:'absolute',top:0,right:0}}>
                  </TouchableOpacity>
              )
          }
    }

      render(){
          return(
              <View style={{flex:1,backgroundColor:"#f0f0f0"}}>
                  <Header navigation={this.props.navigation} title={'我的优惠券'}/>
                  {
                      this.state.loaded?
                          <View style={{flex:1}}>
                              {Util.loading()}
                          </View>:
                         <View style={{flex:1}}>
                             <View style={{flex:1}}>
                                 <View style={styles.list_header}>
                                     {
                                         this.state.listTitle.map((item,index)=>{
                                             return(
                                                 <TouchableOpacity onPress={()=>this.selectStatus(item.status)} key={index} style={styles.header_item}>
                                                     <Text style={item.status==this.state.status?{fontSize:14,color:"#f00"}:{fontSize:14,color:"#333"}}>{item.name}</Text>
                                                 </TouchableOpacity>
                                             )
                                         })
                                     }
                                 </View>
                                 <ScrollView style={{flex:1}}>
                                     {this.showCouponList()}
                                 </ScrollView>
                             </View>
                         </View>
                  }
              </View>
          )
      }
}
var styles = StyleSheet.create({
    list_header:{
        backgroundColor:'#fff',
        flexDirection:"row",
    },
    header_item:{
        flex:1,
        height:40,
        alignItems:'center',
        justifyContent:'center'
    },
    coupon_item:{
        marginBottom:10,
        width:Util.size.width-20,
        height:(Util.size.width-20)*0.31
    },
    item_header:{
        position:'absolute',
        top:10,
        left:15,
    },
    price_view:{
        flexDirection:'row',
        alignItems:'center'
    },
    item_bottom:{
        position:'absolute',
        bottom:10,
        left:15,
    }
})